<template>
  <!-- 空登陆页 -->
  <s-layout title="注册" :bgStyle="{ color: '#000' }">
    <view class="lg-content">
      <image mode="heightFix" src="@/static/img/lg-icon-1.png"></image>
      <view class="lg-content-t">
        <view class="lg-content-t1">九丝城宇宙</view>
        <view class="lg-content-t2">电动汽车砍价专家</view>
      </view>
      <view class="lg-content-form">
        <view class="lg-content-form-title">注册</view>
        <view class="lg-content-form-item">
          <uni-easyinput v-model="state.model.mobile" :style="style" placeholder="请输入手机号"
                         :placeholderStyle="placeholderStyle" :inputBorder="false">
          </uni-easyinput>
        </view>
        <view class="lg-content-form-item">
          <uni-easyinput v-model="state.model.captcha" :style="style" placeholder="请输入图片验证码"
                         :placeholderStyle="placeholderStyle" :inputBorder="false">
            <template v-slot:right>
              <view @click.stop="updateImageCode" class="ss-reset-button img-btn">
                <image :src="imgUrl" mode=""></image>
              </view>
            </template>
          </uni-easyinput>
        </view>
        <view class="lg-content-form-item">
          <uni-easyinput v-model.sync="state.model.code" :style="style" placeholder="验证码"
                         :placeholderStyle="placeholderStyle" :inputBorder="false">
            <template v-slot:right>
              <button
                class="ss-reset-button code-btn code-btn-start"
                :disabled="state.isMobileEnd"
                :class="{ 'code-btn-end': state.isMobileEnd }"
                @tap="getSmsCode('smsRegister', state.model.mobile,state.model.captcha)"
              >
                {{ getSmsTimer('smsRegister') }}
              </button>
            </template>
          </uni-easyinput>
        </view>
        <view class="lg-content-form-item">
          <uni-easyinput v-model.sync="state.model.password" type="password" :style="style" placeholder="请输入密码"
                         :placeholderStyle="placeholderStyle" :inputBorder="false">
          </uni-easyinput>
        </view>
        <view class="lg-content-form-item">
          <uni-easyinput v-model.sync="state.model.passwordAgain" type="password" :style="style"
                         placeholder="请再次输入密码"
                         :placeholderStyle="placeholderStyle" :inputBorder="false">
          </uni-easyinput>
        </view>
        <view class="lg-content-form-item">
          <uni-easyinput v-model.sync="state.model.invite_code" :style="style"
                         placeholder="请输入邀请码(必填)"
                         :placeholderStyle="placeholderStyle" :inputBorder="false">
          </uni-easyinput>
        </view>
        <my-btn block class="lg-content-form-btn" @tap.stop="smsRegisterSubmit">立即注册</my-btn>
      </view>
    </view>
  </s-layout>
</template>

<script setup>
  import { reactive, ref } from 'vue';
  import sheep from '@/sheep';
  import MyBtn from '@/pages/components/my-btn.vue';
  import { getSmsCode, getSmsTimer } from '@/sheep/hooks/useModal';
  import { onLoad } from '@dcloudio/uni-app';
  import { baseUrl } from '@/sheep/config';

  const style = {
    'color': '#FFF',
  };
  const placeholderStyle = {
    'color': '#FFF',
    'font-size': '30rpx',
  };
  const state = reactive({
    isMobileEnd: false, // 手机号输入完毕
    model: {
      mobile: '',
      captcha: '',
      password: '',
      passwordAgain: '',
      code: '',
      invite_code: '',
    },
  });
  const imgUrl = ref('');
  // 图片验证码
  const updateImageCode = () => {
    getImg();
  };
  const getImg = async () => {
    let url = baseUrl + `/addons/shopro/index/captcha` + '?time=' + new Date().getTime();
    imgUrl.value = url;
  };

  // 3.短信注册
  async function smsRegisterSubmit() {
    if (!state.model.mobile) {
      sheep.$helper.toast('请输入手机号');
      return;
    }
    if (!state.model.code) {
      sheep.$helper.toast('验证码');
      return;
    }
    if (!state.model.password) {
      sheep.$helper.toast('请输入密码');
      return;
    }
    if (!state.model.passwordAgain) {
      sheep.$helper.toast('请再次输入密码');
      return;
    }
    if (state.model.password != state.model.passwordAgain) {
      sheep.$helper.toast('两次密码不一致');
      return;
    }
    if (!state.model.invite_code) {
      sheep.$helper.toast('请输入邀请码');
      return;
    }

    const { code } = await sheep.$api.user.smsRegister({
      ...state.model,
    });
    if (code === 1) {
      sheep.$helper.toast('注册成功');
      sheep.$router.go('/pages/index/user');
      // sheep.$router.go('/pages/index/login');
    }
  }

  onLoad(() => {
    getImg();
  });
</script>

<style lang="scss" scoped>
  .img-btn {
    width: 132rpx;
    height: 78rpx;
    border: 1px solid #ccc;

    image {
      width: inherit;
      height: inherit;
    }
  }

  .lg-content {
    background: url('@/static/img/lg-icon-2.png') bottom center no-repeat;
    background-size: 100% auto;
    padding: 0 40rpx;
    height: calc(100vh - 44px);

    .lg-content-t {
      position: relative;
      margin-top: -400rpx;

      .lg-content-t1 {

        font-weight: 300;
        font-size: 70rpx;
        color: #FFFFFF;
      }

      .lg-content-t2 {
        margin-top: 30rpx;

        font-weight: 300;
        font-size: 40rpx;
        color: #FFFFFF;
      }
    }

    .lg-content-form {
      background: #000000;
      border-radius: 30rpx;
      border: 2px solid #595959;
      position: relative;
      margin: 60rpx 0;
      padding: 60rpx 40rpx;

      .send-btn {

        font-weight: 300;
        font-size: 30rpx;
        color: #00A1FF;
      }

      .lg-content-form-title {
        text-align: center;

        font-weight: 400;
        font-size: 42rpx;
        color: #FFFFFF;
      }

      .lg-content-form-item {
        background: #1C1C1C;
        border-radius: 50rpx;
        padding: 15rpx 40rpx;
        margin-top: 40rpx;
      }

      .lg-content-form-enter {
        margin-top: 40rpx;

        font-weight: 300;
        font-size: 30rpx;
        color: #FFFFFF;
      }

      .lg-content-form-btn {
        margin-top: 60rpx;
      }

      .lg-content-form-read {
        margin-top: 40rpx;

        .cicle {
          width: 28rpx;
          height: 28rpx;
          border-radius: 50%;
          border: 2px solid #1DB481;
          margin-right: 10rpx;
        }

        .cicle-active {
          width: 16rpx;
          height: 16rpx;
          background: #1DB481;
          border-radius: 50%;
        }

        .text-active {
          color: #00A1FF;
        }


        font-weight: 400;
        font-size: 26rpx;
        color: #FFFFFF;
      }
    }
  }
</style>
